import React, { useEffect, useState } from 'react'
import ReactEcharts from 'echarts-for-react'
import PieJson from '../../../../../assets/Json/Piejson/pie';
import PieJson2 from '../../../../../assets/Json/Piejson/pie2';
function PieChartComponent({type}) {
    const [option, setOption] =useState({});
    useEffect(()=>{
        console.log(type)
        setOption( {
            tooltip: {
              trigger: 'item',
              formatter:function(params){
                console.log(params.data)
                return `<p>${params.data.name}:${params.data.value}%</p>`
              }
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 20,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: type=='产品大类'?PieJson2:PieJson
              }
            ]
          })
    },[type])
  return (
    <ReactEcharts option={option} style={{width:"100%",height:"300px"}}/>

  )
}

export default PieChartComponent
